<template>
	<view class="kind" id="pageHead-box" style="background-color: #fff;">
		<search ></search>
		<u-swiper @click="handleSlide" :list="slide" keyName="ad_code" previousMargin="20" nextMargin="20" circular
			:autoplay="true" radius="5" height="115"  bgColor="#ffffff"></u-swiper>
		
		<swiper :current="currentIndex" @change="onSwiperChange" class="swiper" style="height: 205px;font-weight: 600;margin-top:15px;background-color: #f1f4fd;" :circular='false' :indicator-dots="false" :autoplay="false"
			:display-multiple-items='3'>
			<swiper-item v-for="(item,index) in lists" :key='index' :class="['kindOne',activeIndex == index ? 'activeKind' : '']"  @click="handleCate(index)" >
				<view >
					<image :class="[activeIndex == index && is_click == 1 ? 'shrink-on-click' : '']"  :src="item.image" style="height:130px;width:28vw;transition: transform 0.5s ease;"></image>
					<view style="margin-top: 5px;">{{item.mobile_name}}</view>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="content"  v-if="second.length>0" style="margin-bottom: 20px;">
			
			<view class="content_shop" style="padding: 0px 12px;">
				<view class=' fade-in' v-if="level==1&&second.second"  v-for="(kind2,index2) in second" :key='index2'>
					<view >
						<view class='kindTit' style="margin-top: 20px;margin-bottom: 20px;">{{kind2.mobile_name}}</view>
						<view class="u-collapse-content">
							<view class="list dFlex  fWap" style="background-color: #fff;padding-top: 10px;" v-if="kind2.second.length>0">
								<view @click="goshopList(kind3.id)" 
									class="smallKind dFlex flexDirection jStart_aCenter"
									v-for="(kind3,index3) in kind2.second" :key='index3' >
									<view class="kindImg imgPublic">
										<image :src="kind3.image" mode="widthFix"></image>
									</view>
									<text style="margin-top: 15px;color:#000">{{kind3.mobile_name}}</text>
								</view>
							</view>
							<u-empty v-else :text='$t("coupon.empty")' mode="data" ></u-empty>
							
						</view>
					</view>
				</view>
				<view class=' fade-in' v-if="level==1&&!second.second"  >
					<view >
						
						<view class="u-collapse-content">
							<view class="list dFlex  fWap" style="background-color: #fff;padding-top: 10px;" v-if="second.length>0">
								<view @click="goshopList(kind3.id)" 
									class="smallKind dFlex flexDirection jStart_aCenter"
									v-for="(kind3,index3) in second" :key='index3' >
									<view class="kindImg imgPublic">
										<image :src="kind3.image" mode="widthFix"></image>
									</view>
									<text style="margin-top: 15px;color:#000">{{kind3.mobile_name}}</text>
								</view>
							</view>
							<u-empty v-else :text='$t("coupon.empty")' mode="data" ></u-empty>
							
						</view>
					</view>
				</view>
				<view class=' fade-in' v-if="level==2" >
					<view >
						
						<view class="u-collapse-content">
							<view class="list dFlex  fWap" style="background-color: #fff;padding-top: 10px;" v-if="second.length>0">
								<view @click="goshopList(kind3.id)" 
									class="smallKind dFlex flexDirection jStart_aCenter"
									v-for="(kind3,index3) in second" :key='index3' >
									<view class="kindImg imgPublic">
										<image :src="kind3.image" mode="widthFix"></image>
									</view>
									<text style="margin-top: 15px;color:#000">{{kind3.mobile_name}}</text>
								</view>
							</view>
							<u-empty v-else :text='$t("coupon.empty")' mode="data" ></u-empty>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content"  v-else="">
			<view  style="text-align: center;margin-top: 50px;">{{$t("coupon.empty")}}</view>
		</view>	
		<!-- <pageBottom></pageBottom> -->
	</view>
</template>

<script>
	import search from '@/components/search.vue';
	import pageBottom from '@/components/pageBottom.vue';
	import navSwiper from '@/components/navSwiper.vue'
	export default {
		components: {
			search,
			pageBottom
		},
		data() {
			return {
				slide: [],
				bannerHeight:'',
				header_top: getApp().globalData.header_top,
				header_height: getApp().globalData.header_height,
				content_height: '',
				activeKind: 0,
				activeIndex: 0,
				is_click: 0,
				lists: [],
				second:[],
				currentIndex:0,
				level:1
			};
		},
		onLoad() {
			for (var i = 0; i < 5; i++) {
				uni.setTabBarItem({
					index: i,
					text: this.$t(`tab.menu${i + 1}`),
				})
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title:this.$t('pages.kind'),
			})
			uni.createSelectorQuery().selectAll('#pageHead-box').boundingClientRect(data => {
				data = data[0];
				this.content_height = uni.getSystemInfoSync().windowHeight - data.height;
			}).exec()
			this.init()
		},
		onPullDownRefresh() {
			this.init()
			uni.stopPullDownRefresh(); // 停止下拉刷新动画
		},
		methods: {
			// 监听 swiper 切换事件
			onSwiperChange(event) {
			  this.currentIndex = event.detail.current;
			},
			// 滑动到指定的 swiper-item
			goToItem(index) {
			  this.currentIndex = index;
			},
			async init() {
				const results = await this.$api('/index/slides')
				this.slide = results
				const result = await this.$api('/index/category')
				this.lists = result;
				if(this.$cache.get('cid')){
					this.activeKind = this.$cache.get('cid');
				}
				console.log(this.activeKind);
				if (this.activeKind > 0) {
					for (let i = 0; i < result.length; i++) {
						if (result[i].id == this.activeKind) {
							this.activeIndex = i
							this.currentIndex =i
							this.level=result[i].level
						}
					}
				}else{
					this.level=result[0].level
				}
				console.log(this.currentIndex);
				this.second = this.lists[this.activeIndex].second;
			},
			handleCate(index) {
				
				this.activeIndex = index
				this.$cache.set('cid', this.lists[this.activeIndex].id)
				this.currentIndex =index
				this.is_click=1
				this.second=[];
				setTimeout(() => {
					this.level=this.lists[this.activeIndex].level
					console.log(this.level);
					this.second = this.lists[this.activeIndex].second;
				}, 10); 
				
			},
			handleSlide(e) {
				const item = this.slide[e]
				this.slideClick(item)
			},
			slideClick(item) {
				console.log(item);
				// 商品
				if (item.media_type == 3) {
					uni.navigateTo({
						url: '/pages/goodDetail?id=' + item.ad_link
					})
				}
				// 分类
				if (item.media_type == 4) {
					uni.navigateTo({
						url: '/pages/shopList?cid=' + item.ad_link
					})
				}
				// 链接
				if (item.media_type == 5) {
					uni.navigateTo({
						url: '/pages/webview?weburl=' + encodeURIComponent(item.ad_link)
					})
				}
			},
			goshopList(id) {
				uni.navigateTo({
					url: '/pages/shopList?cid=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	/* 点击时缩小 */
	.shrink-on-click {
	  transform: scale(1.05); /* 缩小到 80% */
	}
	/* 定义淡入动画 */
	.fade-in {
	  animation: fadeIn 1.5s ease-in-out;
	}
	
	@keyframes fadeIn {
	  from {
	    opacity: 0;
	    transform: translateY(20px);
	  }
	  to {
	    opacity: 1;
	    transform: translateY(0);
	  }
	}
	
	.swiper {
		display: flex;
		flex-wrap: wrap;
		.swiper-item {
			width: 25vw;
		}
	}
	.kindOne {
		width: 100%;
		text-align: center;
		font-size: 13px;
		padding: 15px;
		box-sizing: border-box;
	}
	.activeKind {
		border-bottom: 4px solid #f8e801;
		animation: fadeIn2 1s reverse;
	}
	
	.content {
		.content_shop {
			.list {
				.smallKind {
					.kindImg {
						width: 100px;
						height: 100px;
						border-radius: 4px;
						overflow: hidden;
					}

					width : calc(100% / 3);
					text-align: center;
					font-size:12px;
					margin-bottom: 12px;
				}
				width: 100%;
			}

			.adv {
				width: 100%;
				margin: 12px 0;
			}

			.kindTit {
				width: 100%;
				font-weight: bold;
				margin-bottom: 26rpx;
			}

			width:100%;
			height: 100%;
			overflow: auto;
			padding:12px;
			box-sizing:border-box;
		}

		.content_kind {
			.kindOne {
				width: 100%;
				text-align: center;
				font-size: 13px;
				padding: 15px;
				box-sizing: border-box;
			}

			.activeKind {
				position: relative;
			}

			.activeKind::before {
				content: '';
				width: 3px;
				height: 100%;
				background: $main;
				position: absolute;
				top: 0;
				left: 0;
			}

			width: 101px;
			height: 100%;
			background:white;
			overflow: auto;
		}

		.content_kind::-webkit-scrollbar,
		.content_shop::-webkit-scrollbar {
			width: 0;
		}

		width:100%;
		overflow: hidden;
		min-height: 300px;
	}

	.pageHead {
		background: white;
	}
	.kind{
		padding-bottom: 50px;
	}
	::v-deep.u-swiper__wrapper__item__wrapper__image div{background-size:100%!important}
</style>